<template>

    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="userId" label="userId" width="180" />
        <el-table-column prop="username" label="username" width="180" />
        <el-table-column prop="password" label="password" />
    </el-table>

</template>


<script lang="ts" setup name="User">

import { ref, onMounted,reactive } from 'vue'


const tableData = ref<[]>()


function loadUserList() {
    //从js发起请求
    // http://127.0.0.1:8080/web/user_list

    let xhr = new XMLHttpRequest();

    // let url = "http://127.0.0.1:8080/web/user_list"
    //简写
    let url = "http://127.0.0.1:8080/web/user_list"
    let async = true; //异步

    //在发送之前  设置一下  响应回来的时候  执行的代码     onready 函数
    xhr.onreadystatechange = (event) => {

        if (xhr.status == 200 && xhr.readyState == 4) {


            //json 字符串的表示形式
            let jsonStr = xhr.responseText;

            let userArray = eval(jsonStr);
            tableData.value = userArray;

        }

    }



    //打开
    xhr.open("GET", url, async);

    //获取内容     ---
    xhr.send();


    //执行到此行的时候 ，请求 没有正常返回呢








}




onMounted(() => {
    // 获取数据
    loadUserList();

})


</script>
